<template>
  <el-table :data="userList" border style="width: 100%">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="account" label="账号" />
    <el-table-column prop="nickname" label="个性名称" />
    <el-table-column prop="avatar" label="头像" width="100">
      <template #default="scope">
        <el-image
          style="width: 80px"
          :src="scope.row.avatar"
          fit="fill"
          preview-teleported="true"
          :preview-src-list="[scope.row.avatar]"
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="180" />
    <el-table-column label="操作" #default="scope">
      <el-button type="primary" size="small" @click="upUserById(scope.row)">
        修改
      </el-button>
      <el-button type="danger" size="small" @click="rmUserById(scope.row)">
        删除
      </el-button>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="page.cur"
    v-model:page-size="page.size"
    :page-sizes="[1, 5, 10, 20, 50, 100]"
    @size-change="refreshUserList"
    @current-change="refreshUserList"
    layout="total, sizes, prev, pager, next"
    :total="total"
  />
</template>

<script lang="ts" setup>
import { userListApi } from '@/api/user'
import { onMounted, ref } from 'vue'
const userList = ref([])
const page = ref({
  cur: 1,
  size: 5,
})
const total = ref()
onMounted(() => {
  refreshUserList()
})

//刷新角色列表
const refreshUserList = async () => {
  const { code, msg, data } = await userListApi(page.value.cur, page.value.size)
  //   console.log(data)
  userList.value = data.records
  total.value = data.total
}
//TODO
//添加用户
//修改用户
//删除用户
</script>

<style></style>
